<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>{{title}}</span>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>
    <van-cell >
      <template #title>
        <span class="textLabel" style="display: flex;align-items: center">
          <a class="hengGang"></a>团队基本信息
        </span>
      </template>
      <template #default></template>
    </van-cell>
    <div id="tuanduiTemp">
        <div class="tuanduiIcon">
          <div class="label_left">团队标志</div>
          <div class="label_right">
            <van-uploader
              :max-count="1"
              v-model="fileList"
              multiple
              :after-read="afterRead"
              result-type="dataUrl"
              ref="uploader"
              @delete="Delete"
              :preview-full-image="false"
              preview-size="44px"
            ></van-uploader>
            <img src="../../assets/更多灰.png" alt="">
          </div>
        </div>
        <div class="tuanduiIcon">
          <div class="label_left">团队名称</div>
          <div class="label_right">
            <input type="text" v-model="params.team_name" placeholder="请输入团队名称">
          </div>
        </div>
        <div class="tuanduiIcon" @click="selectDoctor()">
          <div class="label_left">团队长</div>
          <div class="label_right">
            <input type="text" readonly v-model="params.manager_doc_name" placeholder="请选择团队长">
            <img src="../../assets/更多灰.png" alt="">
          </div>
        </div>
        <div class="tuanduiIcon">
          <div class="label_left">团队最多人数</div>
          <div class="label_right">
            <input type="text" v-model="params.team_maxnum"
                   @blur="maxNumblur"
                   placeholder="请输入团队最多人数">
            人
          </div>
        </div>
    </div>
    <div class="textInfo">
      <div class="label">
        <a  class="hengGang"></a>
        团队简介
      </div>
      <div class="textareaDiv">
        <textarea name="" id="" cols="30" v-model="params.team_intro" placeholder="请输入团队简介" maxlength="100" rows="10"></textarea>
        <span class="textlength">{{params.team_intro.length}}/100</span>
      </div>
    </div>
    <div class="textInfo">
      <div class="label">
        <a  class="hengGang"></a>
        团队擅长
      </div>
      <div class="textareaDiv" style="margin-bottom: 60px">
        <textarea name="" v-model="params.team_goodat" placeholder="请输入团队擅长" cols="30" maxlength="100" rows="10"></textarea>
        <span class="textlength">{{ params.team_goodat.length }}/100</span>
      </div>
    </div>
    <div v-show="isLoading"
         style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;position: absolute;top: 0;background: rgba(0, 0, 0, 0.5)" >
      <van-loading size="24px" type="spinner" color="#fff">订单生成中...</van-loading>
    </div>
    <van-dialog v-model="keepShow"
                width="80%"
                confirm-button-color="#1da4f2"
                :title="isEdit === 1 ? '确认修改团队信息吗？' : '确认团队信息填写完成，并创建团队吗？'"
                @confirm="keepConfirm()"
                show-cancel-button>
    </van-dialog>
    <button class="keepButton" v-if="isEdit === 1" @click="keep">确认</button>
    <button class="keepButton" v-else @click="keep">确认创建团队</button>
  </div>
</template>

<script>
import {Toast} from 'vant'

export default {
  name: 'BuildTeam',
  data () {
    return {
      fileList: [],
      params: {
        team_icon: '', // 团队标记
        team_name: '', // 团队名称
        team_intro: '', // 团队介绍
        team_goodat: '', // 团队擅长
        team_maxnum: '', // 团队最多人数
        manager_doc_user_id: '', // 团队负责人ID
        im_group_id: '', // IM群ID
        manager_doc_name: '' // 团队长姓名
      },
      isLoading: false,
      keepShow: false,
      isEdit: '',
      id: this.$route.query.team_id,
      count: 0
    }
  },
  computed: {
    title: function () {
      if (this.isEdit === 1) {
        // document.title = '编辑团队'
        // return '编辑团队'
        document.title = '团队信息维护'
        return '团队信息维护'
      } else {
        document.title = '团队创建'
        return '团队创建'
      }
    }
  },
  mounted () {
    if (this.$route.query.isEdit !== undefined && this.$route.query.isEdit !== null && this.$route.query.isEdit !== '') {
      this.isEdit = Number(this.$route.query.isEdit)
      this.getTeamDetail()
    }
    if (sessionStorage.getItem('TeamData') !== null && sessionStorage.getItem('TeamData') !== undefined) {
      this.params = JSON.parse(sessionStorage.getItem('TeamData'))
      if (this.params.team_icon) {
        this.fileList = [
          { url: this.params.team_icon, isImage: true }
        ]
      }
    }
  },
  methods: {
    maxNumblur () {
      if (this.isEdit === 1) {
        if (Number(this.params.team_maxnum) < Number(this.count)) {
          this.params.team_maxnum = Number(this.count)
          Toast('只能大于等于当前团队人数')
        }
      }
    },
    getTeamDetail () {
      this.$http.Teamdetail({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.fileList = [
              { url: res.data.data.team_icon, isImage: true }
            ]
            this.params.team_icon = res.data.data.team_icon // 团队标记
            this.params.team_name = res.data.data.team_name // 团队名称
            this.params.team_intro = res.data.data.team_intro // 团队介绍
            this.params.team_goodat = res.data.data.team_goodat // 团队擅长
            this.params.team_maxnum = res.data.data.team_maxnum // 团队最多人数
            this.params.manager_doc_user_id = res.data.data.USER_ID // 团队负责人ID
            this.params.manager_doc_name = res.data.data.NICK_NAME // 团队长姓名
            this.count = res.data.data.count
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 选择团队长
    selectDoctor () {
      if (this.isEdit === 1) {
        this.$router.push({path: '/NewTeamLeader', query: {id: this.id}})
      } else {
        sessionStorage.setItem('TeamData', JSON.stringify(this.params))
        this.$router.push({path: '/SelectTeamLeader'})
      }
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 保存确认按钮
    keepConfirm () {
      if (this.isEdit === 1) {
      } else {
        this.id = 0
      }
      this.$http.createDocTeam({
        team_icon: this.params.team_icon, // 团队标记
        team_name: this.params.team_name, // 团队名称
        team_intro: this.params.team_intro, // 团队介绍
        team_goodat: this.params.team_goodat, // 团队擅长
        team_maxnum: this.params.team_maxnum, // 团队最多人数
        manager_doc_user_id: this.params.manager_doc_user_id,
        id: this.id
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            if (this.isEdit === 1) {
              Toast('团队修改成功')
            } else {
              Toast('团队创建成功')
            }
            if (this.id) {
              this.$router.history.go(-1)
            } else {
              this.$router.replace({path: '/OrganizationalList',
                query: {userid: this.userid, isAll: 1, team_id: res.data.data.team_id}
              })
            }
            // this.$router.history.go(-1)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击保存按钮
    keep () {
      if (this.params.team_icon === '') {
        Toast('请上传团队标记')
        return false
      } else if (this.params.team_name === '') {
        Toast('请输入团队名称')
        return false
      } else if (this.params.team_intro === '') {
        Toast('请输入团队介绍')
        return false
      } else if (this.params.team_goodat === '') {
        Toast('请输入团队擅长')
        return false
      } else if (this.params.team_maxnum === '') {
        Toast('请输入团队最多人数')
        return false
      }
      this.keepShow = true
    },
    Delete (file) {
      this.params.team_icon = ''
    },
    afterRead (file) {
      file.status = 'uploading'
      // file.message = '上传中...'
      this.$http.img({base64: file.content, type: 8})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            file.status = 'success'
            file.message = ''
            this.params.team_icon = res.data.data
            console.log(this.params)
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
    overflow: auto;
    font-size: 15px;
    font-family: PingFang SC;
  }
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
    background: white;
    position: sticky;
    top: 0;
    z-index: 9;
  }
  .div{
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-family: "PingFang SC";
    font-size: 15px;
    font-weight: bold;
  }
  .div img{
    margin-right: 5px;
  }
  .div:nth-child(1) img{
    height: 13px;
    width: 7px;
    margin-left: 15px;
  }
  .div:nth-child(3) img{
    margin-right: 5px;
    width: 13px;
    height: 13px;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .div:nth-child(2){
    justify-content: center;
  }
  .div:nth-child(3){
    justify-content: flex-end;
  }
  .solid{
    color: #1DA4F2;
  }
  .label{
    width: 92%;
    min-height: 44px;
    margin: 0 auto;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 15px;
    background: #1DA4F2;
    margin-right: 5px;
  }
  .textInfo{
    background: #FFFFFF;
    margin-top: 5px;
    padding-bottom: 10px;
    box-sizing: border-box;
  }
  .textareaDiv{
    width: 92%;
    height: 140px;
    border: 1px solid #999999;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
  }
  .textareaDiv textarea{
    width: 100%;
    height: 80%;
    resize: none;
    border: none;
    overflow: auto;
    padding: 5px 10px;
    box-sizing: border-box;
    background: transparent;
  }
  .textLabel{
    font-size: 15px!important;
    font-weight: bold;
  }
  .textlength{
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 13px;
    color: #999999;
  }
  /deep/ .van-uploader__upload,
  /deep/ .van-uploader__preview-image,
  /deep/ .van-uploader__mask{
    border-radius: 50%;
  }
  #tuanduiTemp{
    background: #FFFFFF;
    width: 100%;
  }
  .tuanduiIcon{
    width: 92%;
    min-height: 44px;
    display: flex;
    justify-content: space-between;
    /*padding: 5px 20px;*/
    padding: 5px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #E5E5E5;
    margin: 0 auto;
  }
  .label_left,
  .label_right,
  .label{
    display: flex;
    align-items: center;
  }
  .label_right img{
    width: 7px;
    height: 13px;
    margin-left: 5px;
  }
  .label_right input{
    text-align: right;
    border: none;
  }
  .label_right input::placeholder{
    color: #999999;
  }
  /deep/ .van-uploader__upload{
    margin: 0 auto;
  }
  .keepButton{
    width: 92%;
    height: 44px;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
    border-radius: 22px;
    color: #FFFFFF;
    border: none;
    margin: 10px 3%;
    font-size: 17px !important;
    font-weight: bold;
    position: absolute;
    bottom: 0;
  }
  /deep/ .van-dialog__header--isolated{
    padding: 24px 10px;
  }
</style>
